import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      warningSourceEchart: null,
      warningSourceEchartList: [],
      colorIndex: -1,
      color: ['#1fadff', '#33cbdb', '#20b355', '#54d460', '#9f81ff', '#abd454', '#d4c054', '#d49054', '#54a8d4', '#546fd4', '#7e54d4', '#b154d4', '#5472d4'],
      warningSourceOption: {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(9, 37, 56, 0.5)',
          extraCssText: 'box-shadow: 0 0 5px 2px rgba(8, 69, 69) inset;'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['45%', '70%'],
            center: ['50%', '50%'],
            itemStyle: {
              borderWidth: 1,
              borderColor: '#092232'
            },
            data: [],
            label: {
              formatter: '{b|{b}}{d|{c}次}',
              rich: {
                b: {
                  fontSize: 14,
                  color: '#fff',
                  padding: [0, 10, 0, 0],
                  align: 'center'
                },
                d: {
                  fontSize: 14,
                  color: '#00e8ff',
                  align: 'left'
                }
              }
            }
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters({
      incomingAIVideoNode: 'incomingAIVideoNode'
    })
  },
  watch: {
    incomingAIVideoNode (item) {
      this.incomingWarningSource(item)
    }
  },
  methods: {
    initWarningSource () {
      this.warningSourceEchartList = this.warnSourceList.map((item, index) => {
        this.colorIndex++
        return {
          value: item.value,
          name: item.name,
          itemStyle: {color: this.color[index]}
        }
      })
      this.warningSourceOption.series[0].data = this.warningSourceEchartList
      this.warningSourceEchart = this.$echarts.init(this.$refs.warningSource)
      this.warningSourceEchart.setOption(this.warningSourceOption)
    },
    incomingWarningSource (item) {
      let status = true
      for (let source of this.warningSourceEchartList) {
        if (source.name === item.deviceVideoName) {
          source.value++
          status = false
          break
        }
      }
      if (status) {
        this.colorIndex++
        this.warningSourceEchartList.push({
          value: 1,
          name: item.deviceVideoName,
          itemStyle: {color: this.color[this.colorIndex]}
        })
      }
      this.warningSourceEchart.setOption({
        series: {
          name: '',
          data: this.warningSourceEchartList
        }
      })
    }
  }
}
